<template>
	<view class="row b-b top-nav" style="background: #FFFFFF;">
		<view class="top-nav-item" @tap="changeTab(v, k)" v-for="(v, k) in navList" :key="k">
			<view class="row center item_con">
				<view class="top-nav-item-title" :class="{iconColor: k == current}">{{ v.title }}</view>
				<view class="top-nav-item-icon" v-if="k != 0 && k != 3">
					<u-icon name="arrow-up-fill" size="16" :color="[v.flag == 1 ? '#000000' : '#999999']"></u-icon>
					<u-icon name="arrow-down-fill" size="16" :color="[v.flag == 0 ? '#000000' : '#999999']"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			sortType: 0,
			navList: [
				{
					title: "综合",
					flag: ""
				},
				{
					title: "价格",
					flag: 0
				},
				{
					title: "销量",
					flag: 0
				},
				{
					title: "新品",
					flag: ""
				}
			]
		};
	},
	methods: {
		changeTab(v, k) {
			if (this.current == 0 && k == 0) {
				return;
			} else {
				if (this.current == k) {
					v.flag == 1 ? ((v.flag = 0), (this.sortType = 0)) : ((v.flag = 1), (this.sortType = 1));
				} else {
					this.current = k;
					this.sortType = this.navList[k].flag;
				}
				const {current, sortType} = this;
				this.$emit("changeStore", {current, sortType});
			}
		}
	}
};
</script>

<style scoped>
.iconColor {
	color: #000000 !important;
}
.top-nav {
	height: 100upx;
	background: #ffffff;
	z-index: 999;
}

.top-nav-item {
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.item_con {
	width: 165rpx;
	height: 80rpx;
	background: #ffffff;
	border-radius: 27rpx;
	align-items: stretch;
}
.top-nav-item-title {
	font-size: 26rpx;
	color: #999999;
	margin-right: 10upx;
	line-height: 80rpx;
}

.top-nav-item-icon {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
</style>
